<script setup lang="ts">

import {onMounted, ref, toRaw} from "vue";
import axios from "axios";
import {ServerHost} from "@/main";
import {ElNotification} from "element-plus";
import {Check, Close, Timer} from "@element-plus/icons-vue";

const userList = ref([])
const isLoadingList = ref(true)

// 懒加载用户列表
const observerDiv = ref(null)
const hasLoad = ref(false)
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        if (!hasLoad.value) {
          loadList()
        }
      }
    });
  });
  observer.observe(observerDiv.value);
})

const loadList = () => {
  console.log("开始获取用户列表")
  axios.get(`${ServerHost}/getUserList`)
      .then((res) => {
        if (res.status === 200) {
          console.log(res.data)
          userList.value = res.data;
          hasLoad.value = true
          isLoadingList.value = false
        } else {
          ElNotification({
            title: '用户数据获取失败',
            type: 'error',
            position: 'bottom-right',
          })
        }
      })
}

const updateUserUserPermission = (row: any) => {
  if(row.row.username === 'rrsRoot') {
    ElNotification({
      title: '不能修改超级管理员权限',
      type: 'error',
      position: 'bottom-right',
    })
    return
  }

  const permission = row.column.property
  const to = !eval('row.row.' + row.column.property)
  console.log(row.row.username)
  console.log(permission, 'to', to)
  axios.post(`${ServerHost}/updateUserPermission?id=${row.row.id}&permission=${permission}&to=${to}`)
      .then((res) => {
        if (res.status === 200) {
          ElNotification({
            title: '用户权限更新成功',
            type: 'success',
            position: 'bottom-right',
          })
          loadList()
        } else {
          ElNotification({
            title: '用户权限更新失败',
            type: 'error',
            position: 'bottom-right',
          })
        }
      })
}

</script>

<template>

  <div ref="observerDiv"/>
  <el-table
      :data="userList"
      height="calc(100vh - 120px - 140px)"
      empty-text="没有用户"
      v-loading="isLoadingList">
    <el-table-column prop="id" label="用户ID"/>
    <el-table-column prop="username" label="用户名"/>
    <el-table-column prop="tel" label="绑定手机号">
      <template #default="row">
        <p v-if="row.row.tel != null">{{row.row.tel}}</p>
        <p v-else>-</p>
      </template>
    </el-table-column>
    <el-table-column prop="isSeller" label="农产品卖家">
      <template #default="row">
        <el-button @click="updateUserUserPermission(row)" v-if="row.row.username === 'rrsRoot'" type="primary" :icon="Check" circle/>
        <el-popover v-else placement="left" :width="100">
          <template #reference>
            <el-button type="primary" v-if="row.row.isSeller" :icon="Check" circle/>
            <el-button v-else :icon="Close" circle/>
          </template>
          <p>要切换权限吗？</p>
          <el-button @click="updateUserUserPermission(row)" class="w-full" type="danger">确定</el-button>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="isAdmin" label="系统管理员">
      <template #default="row">
        <el-button @click="updateUserUserPermission(row)" v-if="row.row.username === 'rrsRoot'" type="primary" :icon="Check" circle/>
        <el-popover v-else placement="left" :width="100">
          <template #reference>
            <el-button type="primary" v-if="row.row.isAdmin" :icon="Check" circle/>
            <el-button v-else :icon="Close" circle/>
          </template>
          <p>要切换权限吗？</p>
          <el-button @click="updateUserUserPermission(row)" class="w-full" type="danger">确定</el-button>
        </el-popover>
      </template>
    </el-table-column>

  </el-table>

</template>

<style scoped lang="scss">

</style>
